<template>
  <div id="videoFace">
    <div class="pic-box" @click="videoPlay">
      <el-image :src="cover || imgSrc" fit="contain"></el-image>
      <i v-if="showIcon" class="el-icon-caret-right"></i>
    </div>
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>

<script>
import defaultImg from '@assets/img/status.jpg'
import showVideo from '@common/showVideo'
import { getVideoImg } from '@utils/getFaceImg'
import { getVideoPara } from '@utils/pubFunction'
export default {
  name: 'videoFace',
  msg: '视频封面',
  components: {
    showVideo
  },
  props: {
    vid: {
      type: String,
      default() {
        return ''
      }
    },
    cover: {
      //封面图
      type: String,
      default() {
        return ''
      }
    },
    showIcon: {
      //是否显示播放图标（小三角）
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      videoData: {
        isShow: false,
        vid: ''
      },
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },
      imgSrc: ''
    }
  },
  mounted() {
    if (!this.cover) {
      //列表没有返回封面图，使用保利威接口获取
      this.getPolivNum()
    }
  },
  methods: {
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      getVideoPara().then((res) => {
        this.polivNum.polyvUserId = res.polyvUserId
        this.polivNum.polyvSecretKey = res.polyvSecretKey
        this.getImg(this.vid)
      })
    },
    /* 获取封面图 */
    getImg(vid) {
      let _this = this
      return getVideoImg(vid, this.polivNum).then((res) => {
        _this.imgSrc = res || defaultImg
      })
    },
    /* 播放视频 */
    videoPlay() {
      if (!this.vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = this.vid
      this.videoData.isShow = true
    }
  }
}
</script>

<style lang="less">
#videoFace {
  width: 100%;
  height: 100%;
  .pic-box {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #000;

    .el-image {
      width: 100%;
      height: 100%;
    }

    i {
      position: absolute;
      width: 70px;
      height: 70px;
      top: 50%;
      left: 50%;
      margin: -35px 0 0 -35px;
      z-index: 10;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      text-align: center;
      line-height: 70px;
      font-size: 40px;
      border-radius: 50%;
    }
  }
}
</style>
